<!-- 
先把博客展示的样式写出来，中间使用一个数组，点击搜索时根据keyword更新数组，实现展示

貌似是因为LeiXingId是int,就算keyword是数字，拼接出的url也不能被正常使用
（或许可以类型转换，或许不支持url的拼接）

搜索博客时keyword是字符串，不知道可不可以解决

 8080 9090
 -->

<template>
	<view>
		<!-- 搜索框 -->
		<view>
			<u-search height="70" placeholder="请输入关键字" v-model="keyword" 
			@custom="search(keyword)" ></u-search>
		</view>
		<u-line color="#d5d5d5" /> 
		<!-- 按作者，按内容 -->
		<!-- tabsSwiper 全屏选项卡 -->
		<view class="container">
			<u-sticky>
				<!-- 只能有一个根元素 -->
				<view class="sticky">
					<u-tabs 
					font-size="40"
					name="cate_name" 
					count="cate_count" 
					:list="list2" 
					:is-scroll="false" 
					:current="current" 
					@change="tabsChange"
					>
					</u-tabs>
					<u-line color="#cecece" /> <!-- 分割线 -->
				</view>
			</u-sticky>
		</view>
		<u-gap height="20" bg-color="#ffffff"></u-gap>
		
		<!-- 博客展示 -->
			
		<view v-for="(item,index) in user" :key="item.userId">
			<u-gap height="20" bg-color="#ffffff"></u-gap>
			<!-- 头像 昵称 属地 关注 -->
			<view class="class01" >
				<view class="touxiang" @click="goSelfInfo(item)">
					<view class="u-m-r-10">
						<u-avatar :src=item.userImg size="140" ></u-avatar>
					</view>
				</view>
				<view class="nichengIP" @click="goSelfInfo(item)">
					<view class="nicheng">
						<view class="u-font-19 u-p-b-20">{{item.userName}}</view>
					</view>
					<view class="IP">
						<view class="u-font-14 u-tips-color">IP:{{item.city}}</view>
					</view>
				</view>
			</view>
			<!-- 头像，博客主体之间的分割线 -->	
			<u-line color="#d5d5d5" /> 
			
			<!-- 博客：标题 主体 图片 -->
			<view class="allboke" v-if="is_blog" @click="goBoke(item)">
				<view class="boke">
					<view class="bokeTitle"> 
						<text class="titleText">{{item.title}}</text>
					</view>
					
					<u-line color="#d5d5d5" /> <!-- 标题与正文分割线 -->
					
					<view class="bokeBody">  <!-- 主题 -->
						<text class="text">{{item.content}}</text>
					</view>
				</view>
				<image :src=item.blogImg class="boke_pic"></image>
			</view>
			
			<!-- 博客主体，点赞关注之间的分割线 -->
			<u-line color="#d5d5d5" />
			<u-gap height="20" bg-color="#e7e7e7"></u-gap>
			<u-line color="#d5d5d5" />
			
			
			
		</view>
		
		<!-- 返回顶部 -->
		<view class="wrap">
			<u-back-top :scroll-top="scrollTop"></u-back-top>
		</view>
		
		<!-- 底部分割线 -->
		<u-divider>没有更多了</u-divider>
			
		

		
	</view>	
</template>

<script>
	export default {
		data() {
			return {
				is_blog:false,  //是否是搜索用户
				value: '1',//分类标签默认值
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				scrollTop:1,
				list2: [{
						name: '用户'
					}, {
						name: '博客'
					}],
				keyword:null,
				scrollTop:1,
				searched:'false',
				user:[],
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			
			//点击搜索，更新博客列表
			search(keyword){
				console.log(keyword);
				//搜素内容不能为空
				if(keyword==null){
					this.$u.toast("请输入搜索关键词");
				}
				else{
					
				
					//current为0，搜索用户
					if(this.current==0){
						
						this.keyword=keyword;
						this.$u.toast("搜索关键词："+keyword);
						this.is_blog=false;
						uni.request({
						url:"http://localhost:9090/BlogByAuthor?Author="+keyword,
						method:"GET",
						success:(res)=>{
							console.log(res);
								//成功更新博客内容
								if(res.data.code*1==200){
									
									this.user=res.data.result;
									console.log("搜索用户成功！");
								}
								
							 //失败code 201，异常
								else{
									this.$u.toast("加载数据异常");
								}
							}  
						 });
					}
					
					//current为1,搜索博客
					else{
						this.keyword=keyword;
						this.$u.toast("搜索关键词："+keyword);
						this.is_blog=true;
						uni.request({
						url:"http://localhost:9090/BlogByContent?Content="+keyword,
						method:"GET",
						success:(res)=>{
							console.log(res);
								//成功更新博客内容
								if(res.data.code*1==200){
									
									this.user=res.data.result;
									console.log("搜索博客成功");
								}
								
							 //失败code 201，异常
								else{
									this.$u.toast("搜索博客异常");
								}
							}  
						 });
					}
							
				}
				
			},
			
			// 选中某个单选框时，由radio时触发
			radioChange(e) {
				 console.log(e);
				
			},
			
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				 console.log(e);
			},
//-------------点击头像，跳转到个人简介--------------------------------------------
			goSelfInfo(item){
				console.log("跳转到个人简介");
				uni.navigateTo({
					url: '/pages/TRH_pages/Selfinfo?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			},
			goBoke(item){
				console.log("跳转到个人简介");
				uni.navigateTo({
					url: '/pages/TRH_pages/Showboke?item=' + encodeURIComponent(JSON.stringify(item))
				})
				
			},
			//点击用户，博客选项卡
			tabsChange(index) {
				console.log(index);
				this.current=index;
				if(this.keyword==null){
					console.log("关键词为空");
				}
				else{
					//current为0，搜索用户
						if(index==0){
							this.$u.toast("搜索关键词："+this.keyword);
							this.is_blog=false;
							uni.request({
							url:"http://localhost:9090/BlogByAuthor?Author="+this.keyword,
							method:"GET",
							success:(res)=>{
								console.log(res);
									//成功更新博客内容
									if(res.data.code*1==200){
										this.user=res.data.result;
										console.log("加载博客成功！");
									}
									
								 //失败code 201，异常
									else{
										this.$u.toast("加载数据异常");
									}
								}  
							 });
						}
						
						//current为1,搜索博客
						else{
							this.$u.toast("搜索关键词："+this.keyword);
							this.is_blog=true;
							uni.request({
							url:"http://localhost:9090/BlogByContent?Content="+this.keyword,
							method:"GET",
							success:(res)=>{
								console.log(res);
									//成功更新博客内容
									if(res.data.code*1==200){
										
										this.user=res.data.result;
										console.log("搜索博客成功");
									}
									
								 //失败code 201，异常
									else{
										this.$u.toast("搜索博客异常");
									}
								}  
							 });
						}
				}
			
									
					
				
				}
				

	}

	
	}
</script>

<style scoped lang="scss" >
	@import "@/common/demo.scss";
	.text{
		display: -webkit-box; /*弹性伸缩盒子模型显示*/
		-webkit-box-orient: vertical; /*排列方式*/ 
		-webkit-line-clamp: 6; /*显示文本行数(这里控制多少行隐藏)*/
		overflow: hidden; /*溢出隐藏*/
		padding-left: 5% ;
	}
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		.boke{				//装博客 标题 容器的样式
			width:60vw;
			height:400rpx;
			background: #2979ff;
			.bokeTitle{		//博客标题
				width:60vw;
				height:150rpx;
				background: #ffffff;
				.titleText{		//博客标题的样式
					font-size: 20px;
					padding-left: 5% ;
				}
			}
			.bokeBody{		//博客主体
				width:60vw;
				height:250rpx;
				background: #ffffff;
				.bodyText{
					width:60vw;
					height:250rpx;
				}
			}
		}
		.boke_pic{			//博客图片
			width:40vw;
			height:400rpx;
			background: #ffffff;
		}
	}
	.container { 			//全屏选项卡容器的样式
		background: #ffffff;
		height: 100rpx;
		margin-top: 0rpx;
		.tabs{  			//全屏选项卡的样式
			width: 750rpx;
			height: 80rpx;
		}
	}
	.sticky {			//吸顶容器的样式
		width: 750rpx;
		height: 80rpx;
		background-color: #000000;
		color: #fff;
		padding: 0rpx;
	}

	.class01{				//装头像,昵称,IP,关注
		width:100vw;
		height:150rpx;
		background: #ffffff;
		display:flex;
		flex-direction: row;
		
		.touxiang{			//装头像
			width:20vw;
			height:150rpx;
			background: #ffffff;
			padding-left: 5% ;
		}
		.nichengIP{			//装昵称IP
			width:50vw;
			background: #ffffff;
			padding-left: 5% ;
			.nicheng{		//昵称
				width:50vw;
				height:70rpx;
				background: #ffffff;
			}
			.IP{			//IP
				width:50vw;
				height:50rpx;
				background: #ffffff;
			}
		}
		.guanzhu{
			width:30vw;
			background: #ffffff;
		}
		
	}
	.allboke{    			//装博客+博客图片的容器样式
		width:100vw;
		height:400rpx;
		background: #00ff00;
		display: flex;
		flex-direction: row;
		.boke{				//装博客 标题 容器的样式
			width:60vw;
			height:400rpx;
			background: #2979ff;
			.bokeTitle{		//博客标题
				width:60vw;
				height:150rpx;
				background: #ffffff;
				.titleText{		//博客标题的样式
					font-size: 20px;
				}
			}
			.bokeBody{		//博客主体
				width:60vw;
				height:250rpx;
				background: #ffffff;
				.bodyText{
					width:60vw;
					height:250rpx;
				}
			}
		}
		.boke_pic{			//博客图片
			width:40vw;
			height:400rpx;
			background: #ffffff;
		}
	}

	.sticky {			//吸顶容器的样式
		width: 750rpx;
		height: 80rpx;
		background-color: #000000;
		color: #fff;
		padding: 0rpx;
	}
	.wrap {
		height: 0vh;
	}

</style>

